<template>
    <div class="home">
        <!-- 定义页面的结构 -->
        <!-- 顶部导航栏 -->
        <div class="header">
            <!-- <div class="bg">
                <h2 style="text-align: center;margin-top: 0;color:#fff;padding: 10px;">易洁家政</h2>
            </div> -->
            <span>易洁家政</span>
        </div>


        <!-- 顶部轮播区域 -->
        <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in swipeData" :key="item.id">
                    <img :src="item.url" alt="" srcset="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <van-notice-bar style="margin-top: 5px;" left-icon="volume-o"
            text="家政服务是指将部分家庭事务社会化、职业化、市场化，属于民生范畴。由社会专业机构、社区机构、非盈利组织、家政服务公司和专业家政服务人员来承担，帮助家庭与社会互动，构建家庭规范，提高家庭生活质量，以此促进整个社会的发展。" />
        <!-- 菜单栏 -->
        <div class="menu">
            <van-grid :column-num="3" style="font-weight: 700;">
                <van-grid-item @click="toProduct(category.id,index)" v-for="(category,index) in categoryData"
                    :key="category.id" :icon="category.icon" :text="category.name" />
            </van-grid>
        </div>
        <!-- 搜索框 -->

        <div>
            <van-search v-model="searchValue" placeholder="请输入搜索关键词" input-align="center" @input="queryProduct" />
        </div>
        <!-- 底部产品展示区域 -->
        <!-- <div class="wrap">

            <div class="bottom_content" v-for="product in productData" :key="product.id">
                <div><img :src="product.photo"></div>
                <div class="product_name">{{product.name}}</div>
                <div class="product_desc">{{product.description}}</div>
            </div>
        </div> -->
        <div class="wrap_bottom">
            <div class="wrap_content">
                <div class="lover"><img src="../../assets/love(1).png" alt="" srcset=""></div>
                <div class="service">优选服务</div>
            </div>
        </div>
        <div class="content" v-for="product in productData" :key="product.id">
            <!-- 左边图片 -->
            <div class="content_img">
                <img :src="product.photo" alt="" srcset="">
            </div>
            <div style="margin-left: 10px;">
                <p style="color:rgb(238,104,66);font-weight: 700;">{{product.name}}</p>
                <p style="color: #666;">{{product.description | spliceString}}</p>
            </div>
        </div>
        <div style="color:#666;text-align: center;margin-top: 10px;">-----没有更多了-----</div>
        <div style="height: 80px;"></div>

    </div>
</template>

<script>
    // 引入vuex的辅助函数
    import {
        mapActions,
        mapState
    } from 'vuex'
    import {
        get
    } from '@/http/axios'
    import axios from "axios";
    import qs from "qs";
    export default {
        data() {
            return {
                // 轮播图数组
                swipeData: [],
                // 搜索框搜索的值
                searchValue: ''

            };
        },
        computed: {
            ...mapState('category', ['categoryData']),
            ...mapState('product', ['productData'])
        },
        filters: {
            spliceString(data) {
                return data.slice(0, 12) + '...'
            }
        },
        methods: {

            ...mapActions('category', ['getAllCategoryData']),
            ...mapActions('product', ['getAllProductData']),

            // 跳转到产品页面 并且传递参数
            toProduct(categortId, activeKey) {
                this.$router.push({
                    // 路径
                    path: '/manager/orderDetailDesc',
                    // 参数的传递
                    query: {
                        categortId,
                        activeKey
                    }
                })
            },
            // toProduct(categortId, activeKey) {
            //     // 使用编程式导航进行跳转
            //     this.$router.push({
            //         // 路径
            //         path: '/manager/product',
            //         // 参数的传递
            //         query: {
            //             categortId,
            //             activeKey
            //         }
            //     })
            // },
            // 获取所有轮播图数据
            async getAllSwipeData() {
                let res = await get('/carousel/query', {
                    status: '正常'
                })
                this.swipeData = res.data.data
            },
            // 查询产品
            queryProduct() {
                let data = {
                    page: 1,
                    pageSize: 10,
                    name: this.searchValue
                }
                if (this.searchValue == '') {
                    delete data.name
                }
                // 调用vuex中的方法 传参
                this.getAllProductData(data)
            },
            // 查询所有栏目 调用状态机中的方法
            queryCategory() {
                let data = {
                    page: 1,
                    pageSize: 100
                }
                // 调用vuex中的方法 传参
                this.getAllCategoryData(data)
            }
        },

        created() {
            this.getAllSwipeData()
            this.queryCategory()
            this.queryProduct()
        },
    };
</script>

<style scoped>
    .product_desc {
        color: #666;
    }

    .product_name {
        font-size: 20px;
        color: #333;
    }

    .bottom_content img {
        width: 140px;
        margin: 0 auto;
        height: 90px;
    }

    .wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

    }

    .bottom_content {
        text-align: center;
        margin: 0 auto;
        box-shadow: 0 0 5px 0 #eadaff;
        box-sizing: border-box;
        padding: 13px;
        width: 45%;
        height: 160px;
        margin-top: 20px;
        border-radius: 5px;
    }


    /* .bg {
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        height: 130px;
        border-bottom-left-radius: 28px;
        border-bottom-right-radius: 28px;

    } */

    .van-nav-bar__content .van-nav-bar__title {
        color: #fff
    }

    .my-swipe {
        width: 100%;
        margin: 0 auto;
        /* border-radius: 10px; */
        height: 170px;
        /* position: relative; */
        /* margin-top: -70px; */
        z-index: 9999;

    }

    .swipe img {
        width: 100%;
        height: 100%;
    }

    /* 轮播图样式 */
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }

    .home {
        /* background: url('../../assets/bg.png') no-repeat;
        width: 100%;
        height: 100%; */
        background-color: rgb(239, 238, 243);
    }

    .header {
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        width: 100%;
        height: 46px;
        text-align: center;
        line-height: 46px;
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        letter-spacing: 2px
    }

    .wrap_bottom {
        width: 100%;
        height: 45px;
        background-color: #fff;
        border-bottom: 0.5px solid #ccc;
        margin-top: 5px;
    }

    .wrap_bottom img {
        width: 50%;
        height: 82%;
    }

    .wrap_content {
        display: flex;
        text-align: center;
        margin: 0 auto;
        justify-content: center;
        font-family: "STHupo", ' 华文琥珀';
        letter-spacing: 2px
    }

    .service {
        position: relative;
        top: 14px;
    }

    .content_img img {
        position: relative;
        top: 14px;
        width: 120px;
        height: 80px;
    }

    .content {
        display: flex;
        border-bottom: 1px solid #ccc;
        padding: 10px;
        background-color: #fff;

    }

    .lover {
        position: relative;
        top: 12px;
    }
</style>